<template>
  <div class="components">
    <div class="list" v-if="list.length > 0">
      <div class="item f-s-14 m-b-15" v-for="(item, index) in list" :key="index">
        <div class="top dis-flex align-items-c just-con-s-b">
          <div class="left dis-flex align-items-c nowrap-ellipsis">
            <div class="icon m-r-5 flex-sh-0">
              <img class="w-100 h-100" :src="item.icon" />
            </div>
            <div class="c-yellow">活动名称——{{item.activityTitle}}</div>
          </div>
          <div class="right c-fff flex-sh-0">{{item.stateName}}</div>
        </div>
        <div class="info m-t-5">
          <div class="line dis-flex l-h-30">
            <div class="title m-r-5 flex-sh-0">订单编号：</div>
            <div class="text">{{item.orderCode}}</div>
          </div>
          <div class="line dis-flex l-h-30">
            <div class="title m-r-5 flex-sh-0">报名姓名：</div>
            <div class="text">{{item.checkInUser}}</div>
          </div>
          <div class="line dis-flex l-h-30">
            <div class="title m-r-5 flex-sh-0">联系方式：</div>
            <div class="text">{{item.telephone}}</div>
            <div class="button" @click="toggleDetails(item.orderId)" v-if="!item.show">查看详情</div>
            <div class="button" @click="toggleDetails(item.orderId)" v-else>收起详情</div>
          </div>

          <div v-if="item.show && roomList && otherList">

            <div class="line dis-flex l-h-30">
              <div class="title m-r-5">酒店名称：</div>
              <div class="text">
                {{dues.hotel_name}}
              </div>
            </div>

            <div class="line dis-flex l-h-30">
              <div class="title m-r-5">入住日期：</div>
              <div class="text">
                {{item.startTime}} 至 {{item.endTime}}
              </div>
            </div>
            
            <div class="line dis-flex l-h-30" v-for="(v, i) in roomList" :key="i">
              <div class="title m-r-5 flex-sh-0">
                房间型号：
              </div>
              <div class="text dis-flex">
                <div class="name m-r-15 nowrap-ellipsis">{{v.room_title}}</div>
                <div class="m-r-15">{{v.room_count}}间</div>
                <div class="m-r-15">{{v.total_price / 100}}元</div>
              </div>
            </div>
            <!--<div class="line dis-flex l-h-30">-->
              <!--<div class="title m-r-5 flex-sh-0 flex-sh-0">会员数量：</div>-->
              <!--<div class="text dis-flex">-->
                <!--<div class="m-r-15">4人</div>-->
                <!--<div class="m-r-15">2000元</div>-->
              <!--</div>-->
            <!--</div>-->

            <div class="line dis-flex l-h-30" v-for="(v, i) in otherList" :key="i">
              <div class="title m-r-5 flex-sh-0">{{v.fee_name}}：</div>
              <div class="text dis-flex">
                <div class="m-r-15">{{v.total_num}}人</div>
                <div class="m-r-15">{{v.total_price / 100}}元</div>
              </div>
            </div>

            <div class="line dis-flex l-h-30">
              <div class="title m-r-5 flex-sh-0">{{dues.dues_name}}：</div>
              <div class="text">{{dues.other_price}}</div>
            </div>

            <div class="line dis-flex l-h-30">
              <div class="title m-r-5 flex-sh-0">支付时间：</div>
              <div class="text">{{item.timeEnd}}</div>
            </div>

            <div class="line dis-flex l-h-30">
              <div class="title m-r-5">备注：</div>
              <div class="text">
                {{dues.remark}}
              </div>
            </div>

            <div class="line dis-flex l-h-30" v-if="dues.is_bar == 1">
              <div class="title m-r-5">预定信息栏的备注：</div>
              <div class="text" v-for="(v, i) in userInfo" :key="i">
                {{v.bar_name}} : {{v.bar_value}}
              </div>
            </div>

          </div>
        </div>
        <div class="price dis-flex just-con-s-b align-items-c m-t-20 m-b-15">
          <div class="number">总价：{{item.total_price / 100}}元</div>
          <div class="right dis-flex c-fff">
            <div class="btn bg-grey text-center l-h-30 m-r-10" v-if="item.state === '1S'"
                 @click="delOrder(item.orderId)">取消</div>
            <div class="btn bg-orange text-center l-h-30" v-if="item.state === '1S'"
                 @click="pay(item.orderId, item.total_price)">去支付</div>
            <router-link class="btn bg-orange text-center l-h-30 c-fff"
                         :to="`/invoice?orderId=${item.orderId}`"
                 v-if="item.state !== '1S' && item.invoiceState === '0' && item.is_invoice === 1">
              开发票
            </router-link>
          </div>
        </div>
        <div class="tip text-center c-999 l-h-30 f-s-12" v-if="item.state === '1S'">未支付订单不做保留，请及时支付。</div>
        <div class="tip text-center c-999 l-h-30 f-s-12"
             v-else-if="(item.state === '1P' || item.state === '1F') && item.invoiceState === '0'
             && item.is_invoice === 1">
          如需一个订单开具多张发票，请与工作人员联系
        </div>
        <div class="tip text-center c-999 l-h-30 f-s-12"
             v-else-if="(item.state === '1P' || item.state === '1F') && item.invoiceState === '1'
             && item.is_invoice === 1">
          您的开票信息已提交，请等待
        </div>
        <div class="tip text-center c-999 l-h-30 f-s-12"
             v-else-if="(item.state === '1P' || item.state === '1F') && item.invoiceState === '2'
             && item.is_invoice === 1">
          您的发票已开具，请查看邮件或咨询前台人员
        </div>
      </div>
    </div>
    <div v-else class="text-center m-t-20">暂无数据</div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import moment from 'moment'
  import { getDetailsByIdApi, delOrderByIdApi } from '../../api/orderList'
  import { weChatPayApi } from '../../api/common'
  import { wxInit } from '../../utils/weixin-init'
  import wx from "weixin-js-sdk"

  export default {
    props: {
      list: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        otherList: [],
        roomList: [],
        dues:"",
        userInfo:[]
      }
    },
    computed: {
      ...mapGetters([ 'userInfo' ])
    },
    async mounted () {
      await wxInit()
    },
    methods: {
      async toggleDetails (id) {
        try {
          const { charge, room, dues,userInfo} = await getDetailsByIdApi({ id })
          this.otherList = charge
          this.roomList = room
          this.dues = dues
          
          if(this.dues.is_bar == 1){
            this.userInfo = userInfo
          }

          const startTime = room.length > 0 ? moment(room[0].in_time).format('YYYY-MM-DD') : ''
          const endTime = room.length > 0 ? moment(room[0].out_time).format('YYYY-MM-DD') : ''
          this.list.forEach(v => {
            if (v.orderId === id) {
              v.show = !v.show
              Object.assign(v, { startTime, endTime })
            }
          })
        } catch (e) {
          this.$toast.text(e || '服务异常')
        }
      },
      async pay (orderId, totalFee) {
        const dataToPay = {
          orderId,
          body: '下单成功',
          totalFee,
          payType: 'team',
          userId: this.userInfo.userId
        }
        try {
          const res = await weChatPayApi(dataToPay)
          if(res.code === 0){
            const _this = this
            wx.chooseWXPay({
              timestamp: res.data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
              nonceStr: res.data.nonceStr, // 支付签名随机串，不长于 32 位
              package: res.data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
              signType: res.data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: res.data.paySign, // 支付签名
              success: function (data) {
                _this.$toast.text('支付成功')
                _this.$route.push('/orderList')
                _this.$emit('getData')
              },
              error: function (err) {
                _this.$toast.text('支付失败')
              }
            })
          } else {
            this.$toast.text(res.errorMsg)
          }
        } catch (e) {
          this.$toast.text(e || '服务异常')
        }

      },
      async delOrder (id) {
        const params = { id, userId: this.userInfo.userId }
        try {
          const res = await delOrderByIdApi(params)
          if (res === 1) {
            this.$toast.text('删除成功')
            this.$emit('updateData')
          } else {
            this.$toast.text('删除失败')
          }
        } catch (e) {
          this.$toast.text(e || '删除失败')
        }
      }
    }
  }
</script>
<style scoped lang="scss">
  .list {
    .item {
      border-radius: 5px;
      overflow: hidden;
      background: #ffffff;
      .top {
        padding: 10px;
        box-sizing: border-box;
        background: #1B1B1B;
        .left {
          .icon {
            width: 30px;
            height: 30px;
          }
        }
      }
      .info {
        padding: 0 15px;
        box-sizing: border-box;
        .line {
          .text {
            flex-grow: 1;
            .name {
              max-width: 40%;
            }
          }
        }
      }
      .price {
        padding: 0 15px;
        box-sizing: border-box;
        .number {
          color: #B29462;
        }
        .right {
          .btn {
            width: 60px;
          }
          .bg-grey {
            background: #BFBFBF;
          }
          .bg-orange {
            background: #B29462;
          }
        }
      }
    }
  }
</style>
